<template>
	<view class="card">
		<!-- 中间轮播图 -->
		<swiper class="cardSwiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(banner,index) in currentCategory.bannerUrlList"  :key = 'index'>
				<view class="swiper-item">
					<image class="swiperImg" :src="banner" ></image>
				</view>
			</swiper-item>
		
		
		</swiper>
		<!-- 文本 -->
		<view class="cardTitle">{{currentCategory.name}}</view>
		<view class="cardTitle">{{currentCategory.frontName}}</view>
		<!-- 商品列表 -->
		<view class="goodsList">
			<view @click="toDetail(goods)" class="goodsItem" v-for="(goods,index) in currentCard.itemList"
			:key='goods.id'>
				<image class="goodsImg" :src="goods.primaryPicUrl"></image>
				<view class="goodName">
					{{goods.name}}
				</view>
				<view class="goodsPrice">
					{{goods.counterPrice}}
				</view>
			</view>
			
		
		</view>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default{ 
		name:'Card',
		props:['currentId'],
		mounted() {
			this.getCardList()	
		},
		methods:{
			getCardList(){
				this.$store.dispatch('getCardList')
			},
			//点击去到详情页
			toDetail(goods){
				wx.setStorageSync('goodsInfo_key',goods)
				wx.navigateTo({
					url:'/pages/detail/detail',
				})
			},
		},
		computed:{
			...mapState({
				cardList:state=>state.home.cardList
			}),
			//计算点击的这一个nav对应的内容
			//根据点击的nva的L1id和cardList当中每一项的parentId进行对比
			currentCard(){
				return this.cardList.find(item=>item.category.parentId===this.currentId)||{}
			},
			currentCategory(){
				return this.currentCard.category || {}
			},
			
		},
	}
</script>

<style lang="stylus">
	.card
		.cardSwiper
			.swiperImg
				width: 100%;
				height: 300rpx;
		.cardTitle
			text-align center
		.goodsList
			display flex
			flex-wrap wrap
			justify-content space-around
			&::after
				display block
				content ''
				width: 344rpx;
			.goodsItem
				width: 344rpx;
				.goodsImg
					width: 344rpx;
					height: 344rpx;
</style>
